<template>
  <div class="home">
    <el-menu router :default-active="defaultActive" class="home-menu">
      <el-menu-item index="/PocketAI">
        <div class="label-item">
          <el-avatar shape="square" :size="24"
            :src="'http://igrsbj.oss-cn-beijing.aliyuncs.com/jar/CloudBoard_xz/icons/pocketAi.svg'" />
          <span>Storage AI</span>
        </div>
      </el-menu-item>
      <el-menu-item index="/WithNotes">
        <div class="label-item">
          <el-avatar shape="square" :size="24"
            :src="'http://igrsbj.oss-cn-beijing.aliyuncs.com/jar/CloudBoard_xz/icons/note.svg'" />
          <span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;随笔记&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>
        </div>
      </el-menu-item>
      <el-menu-item index="/album">
        <div class="label-item">
          <el-avatar shape="square" :size="24"
            :src="'http://igrsbj.oss-cn-beijing.aliyuncs.com/jar/CloudBoard_xz/icons/album.svg'" />
          <span>相册管理</span>
        </div>
      </el-menu-item>
      <el-menu-item index="/NASFiles">
        <div class="label-item">
          <el-avatar shape="square" :size="24"
            :src="'http://igrsbj.oss-cn-beijing.aliyuncs.com/jar/CloudBoard_xz/icons/nas.svg'" />
          <span>NAS文件</span>
        </div>
      </el-menu-item>

      <el-menu-item>
        <div class="label-item">
          <el-dropdown trigger="click" placement="top-start">
            <span class="el-dropdown-link">
              <el-avatar shape="square" :size="24"
                :src="'http://igrsbj.oss-cn-beijing.aliyuncs.com/jar/CloudBoard_xz/icons/setting.svg'" />
              <span>设置</span>
            </span>
            <template #dropdown>
              <Setting @dialogFormVisible="dialogFormVisible" />
            </template>
          </el-dropdown>
        </div>
      </el-menu-item>
    </el-menu>
    <RouterView class="home-right" />
  </div>
  <el-dialog v-model="isPassword" title="修改登录密码" center="true" style="width: 500px;">
    <el-form :model="form" style="text-align: center;" label-position="top">
      <el-form-item label="当前密码" size="large" style="margin-left: 10px;">
        <el-input v-model="form.password" autocomplete="off" style="width: 450px" placeholder="请输入当前密码" />
      </el-form-item>
      <el-form-item label="设置新密码" size="large" style="margin-left: 10px;">
        <el-input v-model="form.newPassword" autocomplete="off" style="width: 450px" placeholder="请设置新的登录密码" />
      </el-form-item>
      <el-form-item label="再次输入新密码" size="large" style="margin-left: 10px;">
        <el-input v-model="form.confirmPassword" autocomplete="off" style="width: 450px" placeholder="请再次输入新的登录密码" />
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="isPassword = false">取消</el-button>
        <el-button type="primary" @click="isPassword = false">确定</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- wifi 列表 -->
  <el-dialog v-model="isShowWiliList" align-center width="500">
    <wifiList />
  </el-dialog>
  <!--输入密码 -->
  <el-dialog v-model="isShowDialogPassword" align-center width="500">
    <Password @openAlert="isAlert = true" />
  </el-dialog>
  <!-- 密码输入正确弹窗 -->
  <el-dialog v-model="isAlert" align-center width="340">
    <Alert @close="isAlert = false" />
  </el-dialog>
</template>
<script setup>
import { ref, onMounted, computed, reactive } from 'vue'
import Setting from './components/setting.vue';
import wifiList from './components/wifiList.vue';
import Password from './components/password.vue';
import Alert from './components/alert.vue';
import { useRouter, RouterView } from 'vue-router'
const router = useRouter()
import { } from '@/api';

const form = reactive({
  password: '',
  newPassword: '',
  confirmPassword: ''
})
//wifi列表弹窗 
const isShowWiliList = ref(false)
//修改密码弹窗
const isPassword = ref(false)
//isAlert弹窗
const isAlert = ref(false)
//输入wifi密码框显示
const isShowDialogPassword = ref(false)

//头像
const circleUrl = ref('')
// const defaultActive = ref('/PocketAI')
onMounted(() => {
  console.log(router)
  defaultActive.value = '/' + router.currentRoute.value.path.split('/')[1]
})
const defaultActive = computed(() => {
  return '/' + router.currentRoute.value.path.split('/')[1]
})

const toWifiList = (data) => {
  isShowWiliList.value = true
}
const upPassword = (data) => {
  isPassword.value = true
}
const dialogFormVisible = ({ type }) => {
  let obj = {
    'wifiList': toWifiList,
    'password': upPassword
  }
  obj[type]()
}
</script>
<style lang="scss" scoped>
.el-dialog__title {
  font-weight: bold;
  color: #000;
}

.home {
  height: 100vh;
  display: flex;
  align-items: center;

  .home-menu {
    width: 80px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #E7ECF9;

    .el-menu-item {
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;

      &:hover {
        background-color: #ffffff00 !important;
      }

      .label-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;

        width: 56px !important;
        height: 56px;
        padding: 5px;

        :deep(.el-avatar--square) {
          background-color: transparent !important;
        }

        span {
          display: flex;
          align-items: center;
          height: 24px;
          font-size: 12px;
        }

        .el-dropdown-link {
          display: flex;
          flex-direction: column;
          height: 100px;
        }

      }


      &:nth-child(1) {
        margin-top: 30px;
      }

      &:nth-child(5) {
        margin-top: auto;
      }

    }

    .is-active {
      .label-item {
        span {
          // color: #000 !important;
        }

        background: #FFF;
      }



    }

  }

  .home-right {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
  }

}
</style>
